<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta name="force-rendering" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<title>MAP</title>
<style>
#map {
  height: 100%;
}

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#address .poi-name{color:red}
.input-group{
	position:absolute;
	z-index:9999;
	width:100%;
	padding:15px;
}
.input-txt{
	width:80%;
	height:18px;
	line-height:28px;
	padding:5px;
	border:1px #dbdbdb solid;
	border-radius:5px;
	margin:0;
	float:left;
}
.input-btn{
	display:inline-block;
	width:80px;
	text-align:center;
	line-height:28px;
	height:28px;
	background:#fff;
	border:1px #dbdbdb solid;
	border-radius:5px;
	float:left;
	margin-left:5px;
	cursor:pointer
}
</style>

</head>
<body>

<div class="search" style="position:relative">
    <div class="input-group" style="position:absolute;z-index:9999;width:100%;">
		<input type="text" id="place" class="input-txt" placeholder="{:lang('输入地点')}" value=""/>
	    <span class="input-btn" id="search">搜索</span>	
	</div>
	<div id="panel" style="width:100%x;height: 400px;"></div>
	<div>
		<div id="address" style="width: 100%;">
			<div class="amap_lib_placeSearch"><div class="amap_lib_placeSearch_list"><ul class="amap_lib_placeSearch_ul"></ul></div></div>		
		</div>	
		<div id="address_list" style="width: 100%;height:300px;"></div>	
	</div>
</div>
<script src="__STATIC__/plugins/jquery/jquery.min.js"></script>
<script src="__STATIC__/plugins/layer/layer.js"></script>   
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=b97fe867e61667fc6e7babbf1075388a&plugin=AMap.ToolBar,AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder"></script>
<script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
<script type='text/javascript'>

var callback = '{$Request.param.callback}';
var map = new AMap.Map('panel', {
	zoom:13	
});   
var geocoder = new AMap.Geocoder();

var center = map.getCenter();
marker = new AMap.Marker({
	icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
	position: [center.lng,center.lat],
	offset: new AMap.Pixel(-13, -30)
});
marker.setMap(map);


AMap.plugin(['AMap.PlaceSearch'],function(){
	var keywordStatus = false;
    var startTimeSearchLimit = null;
	var placeSearch = new AMap.PlaceSearch({
		pageSize: 5, // 单页显示结果条数
		pageIndex: 1, // 页码
        type:'餐饮服务|购物服务|生活服务|商务住宅|政府机构及社会团体|公司企业',
		//map:map,
		citylimit: true,  //是否强制限制在设置的城市内搜索
		panel: "address_list", // 结果列表将在此容器中进行展示。
		autoFitView: false // 是否自动调整地图视野使绘制的
	});
	
    //在实际运行中，
    //用户可能频繁的拖动和滚动，为减少接口请求频率
    //因此不能及时调用，要有一定延迟，这个就是延迟调用的入口；
    var startTimeSearch = function(){    
        clearTimeout(startTimeSearchLimit);//重置计时器
        startTimeSearchLimit = setTimeout(function(){        
            startSearch();        
        },500);//延迟700毫秒后刷新POI
    };
	var startSearch = function(){
        clearTimeout(startTimeSearchLimit);
		var center = map.getCenter(); 
		var cpoint = [center.lng, center.lat]; //中心点坐标	
		placeSearch.searchNearBy("", cpoint, 20000, function(status, result) {});
		var lnglat = center.lng + ',' + center.lat;		
		geocoder.getAddress(lnglat, function(status, result) {
			if (status === 'complete'&& result.regeocode) {	
				console.log(result.regeocode)
				doAddressComponent(result.regeocode,center.lng,center.lat);
			}
		});
	};
	
	map.on('mapmove', function(){		
		var center = map.getCenter();
		marker.setPosition([center.lng,center.lat]); //更新点标记位置	
        clearTimeout(startTimeSearchLimit);//重置计时器
	});
	map.on('moveend', function(){
		if(keywordStatus === false){			
			startTimeSearch();
		}else{
			keywordStatus = false
		}		
	});

	$("#search").click(function(){
		var keyword = $("#place").val();
		if(!keyword){
			return ;
		}
		$("#place").val("");
		$("#address ul").html(""); 
		keywordStatus = true;
		placeSearch.search(keyword); //关键字查询	
	})
	AMap.event.addListener(placeSearch, "complete", function(result){
		if(result.type == "complete"  && keywordStatus ){		
			var center = result.poiList.pois[0].location;
			map.setCenter([center.lng,center.lat]);		   
		}
	}); //返回结果
	//点击panel列表的点标记
	AMap.event.addListener(placeSearch,"listElementClick",function(e) {
		var pname = replaceName( e.data.pname);
		var result = {
			lat : e.data.location.lat.toFixed(6),
			lng : e.data.location.lng.toFixed(6),
			province : pname,
			city : e.data.cityname,
			district : e.data.adname,
			address : e.data.address,
			content : pname + ','+  e.data.cityname + ','+   e.data.adname  + ','+   e.data.address,
			data: e.data
		};
		gotoParent(result);
	});	
	startSearch();
})
  
  function replaceName(pname){  
      return pname ;//.replace('省','').replace('省','').replace('维吾尔自治区','').replace('壮族自治区','').replace('特别行政区','').replace('回族自治区','').replace('自治区','');               
  }
  
  function gotoParent(result){  
		layer.alert(result.content,{
			title: '确定选择该坐标？'
			,btn: ['确定','取消'] //按钮
			,yes:function(){                          
				window.locationdata = result;
				window.close();
				var index = parent.layer.getFrameIndex(window.name);  
				parent.layer.close(index);//关闭当前页
				parent.window[callback](result);
			}                        
		}); //弹出信息提示窗口
  }
  
    function doAddressComponent(regeocode,lng,lat){	
		$("#address ul").html("");  
		var cp = regeocode.addressComponent;
		if(cp.province == "中华人民共和国"){
			return ;
		}
		var city = cp.city ? cp.city  :  cp.province;
		var district =  cp.district ?  cp.district : city;
		var address = (cp.township ? cp.township + ' ' : '') + cp.street + cp.streetNumber;
		var result = {
			lat : lat.toFixed(6),
			lng : lng.toFixed(6),
			province : cp.province,
			city :  city,
			district : district,
			address : address,
			content : cp.province + ','+  city + ','+   district  + ','+  address,
			data: cp
		};
		
		var li = $('<li class="poibox top">'
			//+'<div class="amap_lib_placeSearch_poi poibox-icon">0</div>'   
			+'<h3 class="poi-title" style="margin-left:5px"><span class="poi-name">当前位置：'+regeocode.formattedAddress+'</span>'
			+'<p class="poi-addr">地址：'+ (address ? address : '未知地点')+'</p></div>'
			+'<div class="clear"></div>'
			+'</li>');
		
		$("#address ul").append(li);
		li.click(function(){		
			gotoParent(result);
		});
   }

</script>

</body>
</html>